<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>红包图还原</title>
	<style type="text/css">
		*{padding:0;margin:0;border:0;}
	</style>
</head>
<body>
	<img src="1.png" id="myImg">
	<canvas id="myCanvas" width="340" height="340"></canvas>
	<script type="text/javascript">
		var myCanvas=document.getElementById("myCanvas");
		var ctx=myCanvas.getContext("2d");
		var image = new Image();   
		image.src = document.getElementById('myImg').src;
		image.onload = function(){
			var tempCanvas = document.createElement('canvas');
		    tempCanvas.width = image.width;
		    tempCanvas.height = image.height;
		    var tempCtx = tempCanvas.getContext('2d');
		    tempCtx.drawImage(image,0,0);
		    var imgData=tempCtx.getImageData(0,0,image.width,image.height);

		    var newCanvas = document.createElement('canvas');
			newCanvas.width = 340;
			newCanvas.height = 340;
			var newCtx = newCanvas.getContext('2d');
			// 原图
			newCtx.putImageData(imgData,0,0,0,0,340,340);

			// ctx.putImageData(imgData,0,0,0,0,340,120);
		    ctx.putImageData(imgData,0,0,0,0,340,11.2);

		    for(var i = 1;i < 27; i++){
		    	ctx.putImageData(imgData,0,0,0,4+12*i,340,7);
		    	newCtx.putImageData(imgData,0,-6,0,4+12*i,340,7);
		    }
		    ctx.putImageData(imgData,0,0,0,330,340,10);

			// var imgData2 = ctx.getImageData(0,0,340,340);
			
			// 叠加图
			// newCtx.putImageData(imgData2,0,0,0,0,340,340);
			document.body.appendChild(newCanvas);
		    var rgbaData = imgData.data;
		    // console.log(rgbaData);
			
		    // context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
		    //imgData	规定要放回画布的 ImageData 对象。
			// x	ImageData 对象左上角的 x 坐标，以像素计。
			// y	ImageData 对象左上角的 y 坐标，以像素计。
			// dirtyX	可选。水平值（x），以像素计，在画布上放置图像的位置。
			// dirtyY	可选。水平值（y），以像素计，在画布上放置图像的位置。
			// dirtyWidth	可选。在画布上绘制图像所使用的宽度。
			// dirtyHeight	可选。在画布上绘制图像所使用的高度。
		};
	</script>
</body>
</html>